<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>新建地址</title>
	<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_474420_0o6wv3e9gbbuik9.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/mui.css">
	<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css">
	<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/fontSize.js"></script>
	<script type="text/javascript" src="js/city.data-3.js"></script>
	<script type="text/javascript" src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/mui.picker.js"></script>
	<script type="text/javascript" src="js/mui.poppicker.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
</head>
<body class="add_address bgcolor">
<div id="app">
	<ul class="add_adr_ul">
		<li class="borderBottom"><span>姓名</span><input type="text" placeholder="请输入姓名" v-model.trim="resObj.name"></li>
		<li class="borderBottom"><span>手机号码</span><input type="text" placeholder="请输入手机号码" v-model.trim="resObj.mobile"></li>
		<li class="borderBottom" @click="pickCity"><span>所在地区</span>
				<input type="text" v-model.trim="resObj.distict" v-if="resObj.distict!=''" disabled="true">
				
				<i class="iconfont icon-xiangyou fr"></i>
			    <i class="fr" id="city"  v-if="resObj.distict==''">请选择</i>
			
		</li>
		<li class="borderBottom"><span>街道</span><input type="text" placeholder="请输入街道名称" v-model.trim="resObj.street"></li>

	    <textarea id="jiedao" placeholder="填写详细地址，如门牌号等" v-model.trim="resObj.detail"></textarea>
	</ul>
	<ul class="add_adr_ul">
		<li><span>设为默认</span>
			<div class="mui-switch mui-switch-mini" id="switch" :class="(locId==id&&locId!=null)?'mui-active':''">
				<div class="mui-switch-handle"></div>
			</div>
		</li>
	</ul>
	<button type="button" class="save_addresss" @click="save">保存</button>
</div>
<script type="text/javascript">
	 var app = new Vue({
			el: '#app',
			data: {
			    list:[],
		        unionid:GetQueryString("unionid"),
		        token:GetQueryString("token"),
		        flag:false,
		        moren:true,
		        resObj:{
		        	distict:"",
			        street:"",
			        name:"",
			        mobile:"",
			        tel:""
		        },
		        locId:localStorage.id?localStorage.id:null,
		        id:GetQueryString("id")?GetQueryString("id"):null,
		        shopId:GetQueryString("shopId")?GetQueryString("shopId"):null,
		       
			},
			mounted(){
				var that=this;
 				document.getElementById("switch").addEventListener('toggle', function(event) {
 					that.moren=event.detail.isActive;
				});
				if(this.id){
				  this.getList();	 
				}
			},
			methods:{
				toogle:function(){
					this.flag=!this.flag;
				},
				pickCity:function(){
					var that=this;
					var cityPicker3 = new mui.PopPicker({
					    layer: 3
				    });
				    cityPicker3.setData(cityData3);
				    cityPicker3.show(function(items) {
				    	if(!items[0].text||!items[1].text){
				    		showLayer("速度太快，没有选中地址哟~"); 
							return;
				    	}
				    	if(items[2].text){
				    		that.resObj.distict=items[0].text+" "+items[1].text+" "+items[2].text;
				    	}else{
				    		that.resObj.distict=items[0].text+" "+items[1].text;
				    	}
						that.resObj.distict=items[0].text+" "+items[1].text+" "+items[2].text;
					}); 	
				},
				getList(){
					var that=this;
					ajaxFun("GET","/trade/address/list",{
	                       token:this.token

	                    },function(data){
	                    	if(data.error==0){
                              that.list=data.addresses;
                               that.getDetail();
	                    	}else{

	                    	}
	                     
                    }); 
				},
				getDetail(){
					var that=this;
                    for (var i = 0; i < that.list.length; i++) {
                    	if(this.id==that.list[i].id){
                            that.resObj=that.list[i];  
                    	}
                    }
				},
				save(){
					var that=this;
					if(this.resObj.name==""){
						showLayer("请输入姓名"); 
						return;
					}
					if(this.resObj.mobile==""){
						showLayer("请输入手机号码"); 
						return;
					}
					if(this.resObj.distict==""){
						showLayer("请选择地区"); 
						return;
					}
					if(this.resObj.street==""){
						showLayer("请输入街道名称"); 
						return;
					}
					if(this.resObj.detail==""){
						showLayer("填写详细地址"); 
						return;
					}
					ajaxFun("GET","/trade/address/save",{
	                        token:this.token,
	                        id:this.id,
						    name:this.resObj.name,
						    mobile:this.resObj.mobile,
						    distict:this.resObj.distict,
						    street:this.resObj.street,
						    detail:this.resObj.detail
	              
	                    },function(data){
	                    	if(data.error==0){
                                showLayer("保存成功");
                                if(localStorage.id==that.id&&!(that.moren)){
                                    localStorage.id=null; 
                                }
                                if(!localStorage.id){
                                	localStorage.id=data.id;
                                }else{
                                	if(that.moren){
                                		localStorage.id=data.id;
                                	}
                                }
                                if(that.shopId){
					              window.location.replace("adressList.html?token="+that.token+"&unionid="+that.unionid+"&shopId="+that.shopId);   

                                }else{
					               window.location.replace("adressList.html?token="+that.token+"&unionid="+that.unionid);   
                                }
	                    	}else{

	                    	}
	                     
                    });
				}

			}
		});
</script>	
</body>
</html>